import { Button, FormRule, PrimaryTableCol, Space, TableRowData } from 'tdesign-vue-next';

import { ActionBarItem } from '@/components/common-action-bar/index.vue';
import { t } from '@/locales';
import { tableActionBtn, tableSwitch } from '@/utils/action';

export interface FormItem {
  id?: number;
  name: string;
  type: string;
  mark: string;
  remark: string;
  display: number;
}

export interface ValueFormItem {
  id?: number;
  label: string;
  value: string;
  style: string;
  display: number;
  listorder: number;
}

export const ACTION_BAR_DATA: ActionBarItem[] = [{ text: 'common.add', auth: ['system:dict:create'], key: 'addShow' }];

export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
  { title: 'ID', colKey: 'id', width: 100 },
  { title: () => t('pages.dict.name'), colKey: 'name' },
  { title: () => t('pages.dict.mark'), colKey: 'type' },
  { title: () => t('pages.dict.remark'), colKey: 'remark', width: 280 },
  { title: () => t('common.createAt'), colKey: 'createdAt', width: 180 },
  {
    title: () => t('common.display'),
    colKey: 'display',
    width: 150,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['system:dict:display']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    title: () => t('common.operation'),
    colKey: 'action',
    width: 260,
    cell(h, { row }) {
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['system:dict:detail'] });
      const actionDelete = tableActionBtn({ h, type: 'delete', row, auths: ['system:dict:delete'] });
      const actionValues = tableActionBtn({ h, type: 'content', row, auths: ['system:dict-value:query'] });
      return h(Space, () => {
        return [actionEdit, actionDelete, actionValues];
      });
    },
  },
];

export const FORM_DATA: FormItem = {
  id: 0,
  name: '',
  type: '',
  mark: '',
  remark: '',
  display: 1,
};

export const FORM_RULES: Record<string, FormRule[]> = {
  name: [{ required: true }, { min: 1, max: 16, message: t('common.lengthBetween', { min: 1, max: 16 }) }],
  type: [
    { required: true },
    { pattern: /^[a-z]+$/, message: t('pages.dict.markTip') },
    { min: 1, max: 16, message: t('common.lengthBetween', { min: 1, max: 16 }) },
  ],
};

export const COLUMNS_VALUE_LIST: PrimaryTableCol<TableRowData>[] = [
  { title: 'ID', colKey: 'id', width: 100 },
  { title: () => t('common.sort'), colKey: 'listorder', width: 100 },
  { title: () => t('pages.dict.key'), colKey: 'label' },
  {
    title: () => t('pages.dict.val'),
    colKey: 'style',
    cell(h, { row }) {
      return h(Button, {
        theme: row.style,
        content: row.value,
      });
    },
  },
  { title: () => t('common.createAt'), colKey: 'createdAt', width: 180 },
  { title: () => t('common.display'), colKey: 'display', width: 150 },
  { title: () => t('common.operation'), colKey: 'action', width: 120 },
];

export const FORM_VALUE_DATA: ValueFormItem = {
  id: 0,
  label: '',
  value: '',
  style: 'default',
  display: 1,
  listorder: 99,
};

export const FORM_VALUE_RULES: Record<string, FormRule[]> = {
  label: [{ required: true }, { min: 1, max: 16, message: t('common.lengthBetween', { min: 1, max: 16 }) }],
  value: [{ required: true }, { min: 1, max: 16, message: t('common.lengthBetween', { min: 1, max: 16 }) }],
};
